<template>
    <Dropdown placement="bottom" :trigger="['click']">
      <BarsOutlined style="font-size: 18px" />
      <template #overlay>
        <a-menu>
          <a-menu-item
            @click="handleItemClick(item)"
            v-for="(item, index) in renderDrops"
            :key="item.key"
          >
            <Icon v-if="item.icon" class="mr-2" :component="item.icon" />{{ item.label }}
          </a-menu-item>
        </a-menu>
      </template>
    </Dropdown>
  </template>
  <script lang="ts" setup>
    import { ref, unref, h, watchEffect } from 'vue';
    import {
      BarsOutlined,
      EditOutlined,
      CloseCircleOutlined,
      InfoCircleOutlined,
      ApartmentOutlined,
      PlusCircleOutlined,
    } from '@ant-design/icons-vue';
    import Icon from '@ant-design/icons-vue';
    import { SvgIcon } from '@/components/basic/svg-icon';
    import { Dropdown, Menu } from 'ant-design-vue';
  
    interface Props {
      dropItems?: any;
      showDefault?: any;
    }
  
    const props = withDefaults(defineProps<Props>(), {
      dropItems: [],
      showDefault: true,
    });
  
    const constantKeys = [      
      {
        label: '新建下级 或者',
        key: 'addChildOr',
        icon: h(PlusCircleOutlined),
      },
      {
        label: '新建下级 并且',
        key: 'addChildAnd',
        icon: h(PlusCircleOutlined),
      },
      {
        label: '删除 本条件组',
        key: 'del',
        icon: h(CloseCircleOutlined),
      },
    ];
  
    const emits = defineEmits(['click']);
    const renderDrops = ref([]);
    watchEffect(() => {
      if (props && props.showDefault) {
        renderDrops.value = constantKeys.concat(props.dropItems ?? []);
      } else if (props && !props.showDefault) {
        renderDrops.value = props.dropItems ?? [];
      }
    });
  
    const handleItemClick = (item) => {
      emits('click', item);
    };
  </script>
  